<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能文本校对</title>
    <link href="../static/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="../static/style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
    <div class="background"></div>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">智能文本校对平台</a>
            </div>
            <div class="collapse navbar-collapse navbar-right">
                <form class="navbar-form navbar-left">
                    <!--
                    <div class="form-group">
                        <label for="spellService" class="control-label">拼写纠错</label>
                        <input id="spellService" v-model="serviceType" type="radio" name="service" class="form-control radio-service" value="0">
                        <label for="repeatService" class="control-label">语法纠错</label>
                        <input id="repeatService" v-model="serviceType" type="radio" name="service" class="form-control radio-service" value="1">
                        <label for="repeatService" class="control-label">搭配纠错</label>
                        <input id="repeatService" v-model="serviceType" type="radio" name="service" class="form-control radio-service" value="2">
                        <label for="repeatService" class="control-label">标点纠错</label>
                        <input id="repeatService" v-model="serviceType" type="radio" name="service" class="form-control radio-service" value="3">
                        <label for="repeatService" class="control-label">机构名纠错</label>
                        <input id="repeatService" v-model="serviceType" type="radio" name="service" class="form-control radio-service" value="4">
                        <label for="repeatService" class="control-label">领导人职务纠错</label>
                        <input id="repeatService" v-model="serviceType" type="radio" name="service" class="form-control radio-service" value="5">
                        <label for="repeatService" class="control-label">数值纠错</label>
                        <input id="repeatService" v-model="serviceType" type="radio" name="service" class="form-control radio-service" value="6">
                        <label for="allService" class="control-label">全功能校对</label>
                        <input id="allService" v-model="serviceType" type="radio" name="Service" class="form-control radio-service" checked value="7">
                    </div>
                    -->
                    <button @click="query" type="button" class="ml-20 btn btn-default">提交</button>
                </form>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div class="main-container">
        <div class="panel panel-text">
            <div class="panel-heading">
                <h3 class="h3">输入文本</h3>
                <hr/>
            </div>
            <div class="panel-body">
                <textarea id="inputArea" name="inputArea" v-model="document" class="input-area form-control" placeholder="请在此输入文字"></textarea>
            </div>
        </div>
        <div class="panel panel-result">
            <div class="panel-heading">
                <h3 class="h3">校对结果</h3>
                <hr/>
            </div>
            <div class="panel-body">
                <ul @click="judge" id="answerList" class="list-group answer-list">
                    <li class="list-group-item answer-item" v-for="answerItem in answerList">
                        <div class="answer-info-group">
                            <span class="label label-info mr-5" v-if="answerItem.type==0">疑似拼写错误</span>
                            <span class="label label-warning mr-5" v-else>疑似重复</span>
                            <span class="font-red" v-text="answerItem.source"></span>
                            <i class="glyphicon glyphicon-arrow-right"></i>
                            <span v-text="answerItem.answer"></span>
                        </div>
                        <div class="answer-choice-group">
                            <div class="btn btn-success" :data-id="answerItem.id" :data-type="1">
                                <i class="glyphicon glyphicon-ok"></i>
                                <span class="ml-5">接受</span>
                            </div>
                            <div class="btn btn-danger" :data-id="answerItem.id" :data-type="0">
                                <i class="glyphicon glyphicon-remove"></i>
                                <span class="ml-5">拒绝</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../static/script/jquery.min.js"></script>
<script src="../static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script src="../static/script/vue.min.js"></script>
<script>
    $(document).ready(function () {
        const windowHeight = $(window).height();

        $(".panel").css("height", windowHeight - 100);
        $("#inputArea").css("height", windowHeight - 240);
        $("#answerList").css("height", windowHeight - 240);
    });
    $(window).resize(function () {
        const windowHeight = $(window).height();

        $(".panel").css("height", windowHeight - 100);
        $("#inputArea").css("height", windowHeight - 240);
        $("#answerList").css("height", windowHeight - 240);
    });

    new Vue({
        el: "#app",
        data: {
            serviceType: 7,
            document: '',
            answerList: []
        },
        methods: {
            query () {
                const _this = this;
                $.ajax({
                    method: "post",
                    url: "repeat",
                    data: {
                        document: this.document
                    },
                    success (resp) {
                        _this.answerList = resp.data.answerList;
                    }
                })
            },
            judge (event) {
                const _this = this;
                let target = event.target;

                if (target.tagName === "SPAN" || target.tagName === "I") {
                    target = target.parentNode;
                }
                const id = target.dataset.id,
                    type = target.dataset.type;

                console.log(id, type);
                if (id !== undefined && type !== undefined) {
                    $.ajax({
                        method: "post",
                        url: "judge",
                        data: {
                            id: id,
                            type: type
                        },
                        success (resp) {
                            _this.answerList = resp.data.answerList;
                        },
                        fail () {

                        }
                    })
                }
            }
        }
    })
</script>
</html>